<script setup lang="ts">
import { ref } from 'vue'
import RichTextEditor from '@/components/RichTextEditor.vue'

const content = ref('<p>这是一个测试内容</p>')
const readonlyContent = ref('<p>这是只读模式的内容</p>')
const customContent = ref('<p>自定义工具栏测试</p>')

const handleChange = (value: string) => {
	console.log('内容变化:', value)
}

const getContent = () => {
	console.log('当前内容:', content.value)
	alert('内容已输出到控制台')
}

// 自定义工具栏配置
const customToolbar = {
	bold: true,
	italic: true,
	underline: true,
	strikethrough: true,
	fontSize: false,
	fontFamily: false,
	alignLeft: true,
	alignCenter: true,
	alignRight: true,
	link: false,
	image: false,
	table: false,
	undo: true,
	redo: false,
	customGroups: []
}

// 完整工具栏配置
const fullToolbar = {
	bold: true,
	italic: true,
	underline: true,
	strikethrough: true,
	fontSize: true,
	fontFamily: true,
	lineHeight: true,
	alignLeft: true,
	alignCenter: true,
	alignRight: true,
	link: true,
	image: true,
	table: true,
	undo: true,
	redo: true,
	customGroups: []
}

// 最小工具栏配置
const minimalToolbar = {
	bold: true,
	italic: true,
	underline: false,
	strikethrough: false,
	fontSize: false,
	fontFamily: false,
	alignLeft: false,
	alignCenter: false,
	alignRight: false,
	link: false,
	image: false,
	table: false,
	undo: true,
	redo: false,
	customGroups: []
}
</script>

<template>
	<IsGuest>
		<div class="p-6">
			<h1 class="text-2xl font-bold mb-6">富文本编辑器测试</h1>

			<div class="space-y-6">
				<!-- 基本编辑器 -->
				<div>
					<h2 class="text-lg font-semibold mb-3">基本编辑器</h2>
					<RichTextEditor
						v-model="content"
						placeholder="请输入内容..."
						height="300px"
						@change="handleChange" />
				</div>

				<!-- 自定义工具栏配置 -->
				<div>
					<h2 class="text-lg font-semibold mb-3">自定义工具栏配置</h2>
					<p class="text-gray-600 mb-3">
						默认配置：字体加粗、斜体、下划线、删除线、对齐方式、撤销
					</p>
					<RichTextEditor
						v-model="customContent"
						:toolbar="customToolbar"
						placeholder="使用自定义工具栏配置..."
						height="200px"
						@change="handleChange" />
				</div>

				<!-- 完整工具栏 -->
				<div>
					<h2 class="text-lg font-semibold mb-3">完整工具栏</h2>
					<p class="text-gray-600 mb-3">显示所有可用功能</p>
					<RichTextEditor
						v-model="content"
						:toolbar="fullToolbar"
						placeholder="使用完整工具栏..."
						height="200px"
						@change="handleChange" />
				</div>

				<!-- 最小工具栏 -->
				<div>
					<h2 class="text-lg font-semibold mb-3">最小工具栏</h2>
					<p class="text-gray-600 mb-3">只显示加粗、斜体和撤销功能</p>
					<RichTextEditor
						v-model="content"
						:toolbar="minimalToolbar"
						placeholder="使用最小工具栏..."
						height="150px"
						@change="handleChange" />
				</div>

				<!-- 只读模式 -->
				<div>
					<h2 class="text-lg font-semibold mb-3">只读模式</h2>
					<RichTextEditor
						v-model="readonlyContent"
						readonly
						height="90px"
						:compact="true" />
				</div>

				<!-- 操作按钮 -->
				<div class="flex gap-2">
					<a-button type="primary" @click="getContent">获取内容</a-button>
					<a-button @click="content = ''">清空内容</a-button>
				</div>

				<!-- 预览区域 -->
				<div>
					<h2 class="text-lg font-semibold mb-3">HTML 预览</h2>
					<div class="p-4 border border-gray-300 rounded-md bg-gray-50">
						<pre class="whitespace-pre-wrap">{{ content }}</pre>
					</div>
				</div>
			</div>
		</div>
	</IsGuest>
</template>
